<template>
    <view class="content">
		<view class="list bgav1" v-for="(item,index) in usercouponlist" :key="index">
			<view class="yhlist" @tap="getCoupon(item.id)">
				<view>
					<view class="txt1">
						<span>{{ item.jian_price }}元</span>
						<span :style="cur==1?'color:rgba(183,183,183,1)':''">满{{ item.man_price }}可用</span>
					</view>
					<view class="txt2">
						<view>{{ item.name }}</view>
						<view>{{ item.start_time }}-{{ item.end_time }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="morder" v-if="more==1">没有更多数据</view>
    </view>
</template>

<script>
const app = getApp();
export default {
    data() {
        return {
            cur:0,
			usercouponlist:[],
			money:0,
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {
        var that = this;
		this.page=0;
		//下单选择优惠券，传过来下单金额 参数：money
		this.money = options.money?options.money:0;
		
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
		this.userCouponList()
	},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {
		this.page = 0;
		this.userCouponList();
	},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {
		this.page++;
		this.userCouponList();
	},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
		getCoupon(id){
			app.globalData.api.request('User/getCoupon', {
				id:id,
			}, 'post', 'form').then((res) => {
				if (res.code == 0) {
					//console.log(res)
					app.globalData.show('领取成功~')
					this.page = 0
					this.userCouponList()
				}else{
					app.globalData.show(res.msg)
				}
			});
		},
		swidths(cur){
			this.cur = cur
			this.userCouponList(cur)
		},
		
		userCouponList(){
			//我的优惠券 status 必选 string 状态/1未使用/3已过期
			//money 必选 string 0 订单金额-可以使用的优惠券
			const that =this;
			if(this.cur == 0)
			{
				var status = 1;
			}else{
				var status = 3;
			}
			app.globalData.api.request('User/coupon', {
				page:this.page,
			}, 'post', 'form').then((res) => {
				if (res.code == 0) {
					//console.log(res)
					//status:'状态/1未使用/2已使用/3已过期
					that.usercouponlist = this.page>0?this.list.concat(res.data):res.data;
					this.more = res.data.length == 0?1:0
				}else{
					app.globalData.show(res.msg)
				}
			});
		}
	}
};
</script>
<style lang="scss">
	.btns{
		border-radius: 10rpx;
		background-color: rgba(134,101,175,1);
		color: rgba(255,255,255,1);
		font-size: 24rpx;
		text-align: center;
		font-family: Roboto;
		width: 690rpx;
		height: 80rpx;
		line-height: 80rpx;
		position: fixed;
		left:30rpx;
		bottom:20rpx;
	}
	.txt2{
		width: 381rpx;
		height: 199rpx;
		display: flex;
		float: right;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	.txt2>view{
		width: 100%;
		height: auto;
		display: table;
	}
	.txt2>view:nth-child(1){
		color: rgba(255,255,255,1);
		font-size: 28rpx;
		text-align: left;
		font-family: PingFangSC-regular;
		margin-bottom: 10rpx;
	}
	.txt2>view:nth-child(2){
		color: rgba(255,255,255,1);
		font-size: 22rpx;
		text-align: left;
		font-family: PingFangSC-regular;
	}
	.txt1{
		width: 189rpx;
		height: 199rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		float: left;
		position: relative;
	}
	.txt1::before{
		width: 1px;
		content: "";
		box-sizing: border-box;
		position: absolute;
		top: 50%;
		right: 0px;
		height: 117rpx;
		margin-top: -58.5rpx;
		border: 0.5px dotted #fff;
	}
	.txt1>span:nth-child(1){
		color: rgba(255,255,255,1);
		font-size: 42rpx;
		text-align: left;
		font-family: PingFangSC-regular;
		margin-bottom: 5px;
	}
	.txt1>span:nth-child(2){
		border-radius: 50px;
		background-color: rgba(255,255,255,1);
		color: rgba(134,101,175,1);
		font-size: 24rpx;
		padding:0px 20rpx;
		text-align: center;
		font-family: Roboto;
	}
	.yhlist>view:nth-child(1){
		width: 601rpx;
		height: 199rpx;
	}
	.yhlist{
		width: 100%;
		height: 199rpx;
		margin-bottom: 30rpx;
		position: relative;
		box-sizing: border-box;
		padding-right: 60rpx;
		position: relative;
		position: absolute;
		top: 0px;
		left: 0px;
	}
	.list{
		width: 695rpx;
		height: 199rpx;
		display: table;
		margin: auto;
		margin-bottom: 20rpx;
		position: relative;
	}
	.bgav1{
		background: url($IMG_URL+'lq.png')no-repeat;
		background-size: 100% 100%;
	}
	.txtnav{
		width:100%;
		height:90rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 30rpx;
	}
	.actives{
		color: rgba(132, 102, 176, 1) !important;
	}
	.txtnav>view{
		width: 50%;
		height: 90rpx;
		display: table;
		float: left;
		line-height: 90rpx;
		text-align: center;
		position: relative;
		font-size: 28rpx;
		color: #333;
	}
	.actives::after{
		content: "";
		width: 70rpx;
		height: 2px;
		background-color:rgba(132, 102, 176, 1);
		position: absolute;
		left: 50%;
		bottom: 0px;
		margin-left: -35rpx;
	}
	page{
		background-color: #fff;
	}
	.content {
		width: 100%;
		height: auto;
		display: table;
		box-sizing: border-box;
		padding: 20rpx 24rpx;
		background-color: #fff;
		padding-bottom: 100rpx;
	}
</style>
